<template>
	<view class="container">
		<u--form labelPosition="left">
			<u-form-item borderBottom label="头像">
				<template slot="right">
					<button class="avatar-btn" openType="chooseAvatar" @chooseavatar='chooseAvatar'
						:customStyle="{border:'none'}" hover-class="none">
						<u-avatar :src="avatarUrl" size="60rpx"></u-avatar>
					</button>
				</template>
			</u-form-item>
			<u-form-item label="昵称" borderBottom>
				<u--input type="nickname" v-model="name" border="none" inputAlign="right" placeholder="昵称"></u--input>
			</u-form-item>
			<u-form-item label="性别" borderBottom labelWidth="auto" @click="sexShow = true">
				<u-picker :show="sexShow" :columns="sexData" @confirm="setStyle" keyName="label" :immediateChange='true'
					@cancel="sexShow = false" :defaultIndex='[sex]'></u-picker>
				<u--input type="text" v-model="sexText" border="none" inputAlign="right" placeholder="请选择性别"
					maxlength='100' readonly suffixIcon="arrow-right">
				</u--input>
			</u-form-item>
		</u--form>
		<u--form labelPosition="top" :labelStyle="{'margin-bottom':'20rpx'}">
			<u-form-item label="签名">
				<u--textarea v-model="signature" inputAlign="right" placeholder="请输入个性签名" count maxlength='280'
					border="bottom" height="180" customStyle="padding:0;">
				</u--textarea>
			</u-form-item>
			<u-button :text="btnText" shape="circle" formType="submit" size="large"
				:customStyle="{'margin-top':'100rpx','height':'90rpx','line-height':'90rpx'}"
				color="linear-gradient(-90deg,#26B3A0, #96E8BA)" @click="editStore()">
			</u-button>
		</u--form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: [],
				avatarUrl: '', //头像
				shortAvatarUrl: '',
				name: '', //昵称
				sex: 0,
				sexShow: false,
				sexText: '',
				sexData: [
					[{
						label: '男',
						value: 0
					}, {
						label: '女',
						value: 1
					}]
				],
				signature: '', //简介
				btnText: '保存',
				postFlag: false
			}
		},
		onLoad() {
			this.getUserInfo();
		},
		methods: {
			async getUserInfo() {
				var _res = await this.$http.requestApi('POST', 'client/getUserInfo', {
					plat_type: this.$platType,
					loginType: 1
				});
				if (_res.status == 200) {
					this.userInfo = _res.data;
					this.name = _res.data.nickname;
					this.avatarUrl = _res.data.avatar;
					this.shortAvatarUrl = _res.data.head_pic;
					this.sex = _res.data.gender;
					this.sexText = _res.data.gender == 1 ? '女' : '男';
					this.signature = _res.data.signature;
					this.$store.commit('updateUserInfo', _res.data);
				}
			},
			//选择弹框
			handleTap(picker) {
				this.$refs[picker].show()
			},
			//确定性别
			setStyle(item) {
				this.sex = item.value[0].value;
				this.sexText = item.value[0].label;
				this.sexShow = false;
			},
			//上传头像
			upload() {
				uni.chooseImage({
					count: 1,
					success: res => {
						const tempFilePaths = res.tempFilePaths;
						this.$http.uploadApi('POST', 'tools/uploadFiles', {
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {
								loginType: 1
							}
						}).then(uploadFileRes => {
							if (uploadFileRes.status == 200) {
								this.avatarUrl = uploadFileRes.data.full_path;
								this.shortAvatarUrl = uploadFileRes.data.img_path;
							} else {
								uni.showToast({
									icon: 'none',
									title: uploadFileRes.msg
								});
							}
						});
					},
					error: function(e) {
						uni.showToast({
							title: '上传失败',
							icon: 'none'
						})
					}
				});
			},
			async chooseAvatar(e) {
				let avatar = e.detail.avatarUrl;
				//已经登录，则调用后端接口数据
				let uploadFileRes = await this.$http.uploadApi('POST', 'tools/uploadFiles', {
					filePath: avatar,
					name: 'file'
				});

				if (uploadFileRes.status == 200) {
					this.avatarUrl = uploadFileRes.data.full_path;
					this.shortAvatarUrl = uploadFileRes.data.img_path;
				} else {
					uni.showToast({
						icon: 'none',
						title: uploadFileRes.msg
					});
				}
			},
			//创建提交
			async editStore() {
				var that = this;
				if (that.postFlag) {
					return;
				}
				if (that.name.trim() == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入昵称'
					});
					return;
				}
				that.btnText = '保存中';
				that.postFlag = true;

				let res = await that.$http.requestApi('POST', 'client/updateUserInfo', {
					head_pic: that.shortAvatarUrl,
					nickname: that.name,
					gender: that.sex,
					signature: that.signature
				});
				if (res.status == 200) {
					that.$store.commit('updateUserInfo', res.data);
					uni.showToast({
						icon: 'none',
						title: '修改成功',
						duration: 1500,
						success() {
							setTimeout(function() {
								uni.switchTab({
									url: "/pages/user/center"
								})
							}, 1500)
						}
					})
				} else {
					that.btnText = '保存';
					that.postFlag = false;
					uni.showToast({
						icon: 'none',
						title: res.msg
					});
				}

			}
		},
	}
</script>

<style lang="scss">
	.container {
		border-top: 1px solid #e9e9e9;
		padding: 0 30rpx;
	}

	.avatar-btn {
		background-color: #fff;

		&::after {
			border: none;
		}
	}
</style>